<template>
  <div class="data-graph-container">
    <div class="toolbar">
      <div class="search-box">
        <i class="fas fa-search"></i>
        <input type="text" placeholder="搜索节点...">
      </div>
      <div class="btn-group">
        <span style="display: flex;align-items: center">
          <NodeTypes/>
        </span>
        <div class="separator"></div>
        <button class="btn">
          <i class="fas fa-plus"></i>添加节点
        </button>
        <button class="btn">
          <i class="fas fa-minus"></i>删除节点
        </button>
        <button class="btn">
          <i class="fas fa-link"></i>创建关系
        </button>
        <button class="btn">
          <i class="fas fa-mouse-pointer"></i>选择工具
        </button>
        <div class="separator"></div>
        <button class="btn">
          <i class="fas fa-save"></i>保存
        </button>
        <button class="btn" @click="handleImportByJson">
          <i class="fas fa-file-export"></i>JSON导入
        </button>
      </div>
    </div>
    <div class="dnd-flow" @drop="onDrop">
      <VueFlow :nodes="nodes" @dragover="onDragOver" @dragleave="onDragLeave" @node-click="handleNodeClick" @pane-click="handlePaneClick" :zoom-on-double-click="false">
        <DropzoneBackground
            :style="{
          backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
          transition: 'background-color 0.2s ease',
        }"
        >
          <p v-if="isDragOver">Drop here</p>
        </DropzoneBackground>
        <template #node-single>
          <Single />
        </template>
      </VueFlow>
      <div id="sidebar" :class="['sidebar', state.isEditVisible ? 'active' : '']">
      </div>
    </div>


    <el-dialog
        v-model="state.dialogVisible"
        title="JSON数据验证"
        width="600px"
        destroy-on-close
    >

      <JsonValid/>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
              type="primary"
              @click="confirmJson"
              :disabled="!isValidJson"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>

</template>


<script setup>
import { ref } from 'vue'
import {VueFlow, useVueFlow, Position} from '@vue-flow/core'
import DropzoneBackground from './DropzoneBackground.vue'
import Sidebar from './Sidebar.vue'
import useDragAndDrop from './useDnD'

import '@vue-flow/core/dist/style.css';
import '@vue-flow/core/dist/theme-default.css';
import '@vue-flow/controls/dist/style.css';
import '@vue-flow/minimap/dist/style.css';
import '@vue-flow/node-resizer/dist/style.css';
import '@/assets/styles/dataGraph.css'
import NodeTypes from "@/views/dataGraph/NodeTypes.vue";
import JsonValid from "@/views/dataGraph/JsonValid.vue";
import Single from "@/views/dataGraph/Single.vue";

const { onConnect, addEdges } = useVueFlow()

const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()

const nodes = ref([
  {
    id: '2',
    type: 'single',
    position: { x: 350, y: 114 },
    targetPosition: Position.Left,
  },
])
const state = reactive({
  isEditVisible:false,
  dialogVisible:false
})

onConnect(addEdges)

function handleNodeClick(event){
  console.log(event)
  state.isEditVisible = true;
}

function handlePaneClick(event){
  state.isEditVisible = false;
}

function handleImportByJson(){
  state.dialogVisible = true
}
</script>


<style lang="scss" scoped>

.data-graph-container{
  height:calc(100vh - 84px)
}

.dnd-flow{
  height:calc(100% - 40px);
  position: relative;
}
/* 工具栏样式 - 高度严格40px */
.toolbar {
  height: 40px;
  background: linear-gradient(90deg, #2c2c54 0%, #1e1e3a 100%);
  border: 1px solid #4a4a8a;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  justify-content: space-between;
}

/* 按钮组基础样式 */
.btn-group {
  display: flex;
  gap: 6px;
}

.btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(to bottom, #40406a, #2d2d54);
  color: #e0e0ff;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(100, 100, 200, 0.2);
}

.btn:hover {
  background: linear-gradient(to bottom, #4361ee, #3a0ca3);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(67, 97, 238, 0.3);
}

.btn:active {
  transform: translateY(0);
  background: linear-gradient(to bottom, #3a0ca3, #2d0680);
}

.btn i {
  font-size: 0.9rem;
}

/* 功能区样式 */
.separator {
  width: 1px;
  height: 28px;
  background: rgba(100, 100, 200, 0.3);
  margin: 0 15px;
}

.search-box {
  height: 32px;
  background: rgba(30, 30, 50, 0.7);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 6px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  min-width: 180px;
}

.search-box:focus-within {
  border-color: #4361ee;
  box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.3);
}

.search-box i {
  font-size: 0.9rem;
  color: #7b7bcc;
}

.search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: #e0e0ff;
  width: 100%;
  font-size: 0.9rem;
}

.search-box input::placeholder {
  color: #7b7bcc;
}

.dropdown {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}

.dropdown-content {
  position: absolute;
  top: 42px;
  right: 0;
  background: #2c2c54;
  border: 1px solid #4a4a8a;
  border-radius: 8px;
  width: 180px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 100;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-content a {
  display: block;
  padding: 12px 15px;
  text-decoration: none;
  color: #e0e0ff;
  font-size: 0.9rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown-content a:hover {
  background: rgba(67, 97, 238, 0.2);
}

.dropdown-content a i {
  width: 20px;
  text-align: center;
}

:deep(.vue-flow__pane.draggable ){
  cursor: pointer;
}

/* 弹框样式 */
.sidebar {
  position: absolute;
  top: 0;
  right: -350px;
  width: 350px;
  height: 100%;
  background: #fff;
  box-shadow: -5px 0 25px rgba(0,0,0,0.15);
  z-index: 100;
  transition: right 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  display: flex;
  flex-direction: column;
}

.sidebar.active {
  right: 0;
}

:deep(.selected){
  border: 1px solid  #0041d0 !important;
  box-shadow: 0 0 0 0.5px #0041d0 !important;
}

</style>
